import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Button } from 'antd';
import { UsergroupAddOutlined } from '@ant-design/icons'
import './course_mode.less'
import {getMemberInfo} from '../../../utils/auth'
import MyEmpty from '../../../components/myempty'
import courseApi from '../../../api/course'
class CourseMode extends Component {

  goCourseDetail = (courseId) => {
    return () => {
      const memberId = getMemberInfo().id
      if(!memberId){
        courseApi.clickCourse({courseId})
      }else{
        courseApi.clickCourse({courseId,memberId})
      }
      this.props.history.push({
        pathname: '/course-detail',
        search: "courseId="+courseId
      })
    }
  }
  goMore = (courseTypeId)=>{
    return ()=>{
      this.props.history.push({
        pathname: '/course-more',
        search: "courseTypeId="+courseTypeId
      })
    }
  }
  render() {
    const { children, courseList,courseTypeId } = this.props
    return (
      <div className="course-mode-container">
        <div className="mode-head">
          <h2>{children}</h2>
          <Button type="primary" onClick={this.goMore(courseTypeId)}>更多</Button>
        </div>

        <div className="mode-main">
          {courseList && courseList.length ?
            courseList.map(item => {
              return (<div className="mode-item" key={item.id} onClick={this.goCourseDetail(item.id)}>
                <div className="image-box">
                  <img src={item.url} alt="课程图片" />

                </div>
                <h3>{item.title}</h3>
                <p>{item.description}</p>
                <div className="item-bottom">
                  <span style={{ color: '#409EFF' }}>{item.status === 1 ? '完结':'更新中'}</span>
                  <Button icon={<UsergroupAddOutlined />} type="primary">{item.views}人看过</Button>
                </div>
                <div className="sort">{item.sort}</div>
              </div>)
            }) : <div style={{ width: '100%', display: "flex", justifyContent: 'center' }}><MyEmpty /></div>
          }
        </div>

      </div>
    )
  }
}
export default withRouter(CourseMode)